<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redux快速体验</title>
</head>
<body>
    <button id="decrement">-</button>
    <span id="count">0</span>
    <button id="increment">+</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.js"></script>
    <script>
        // 1. 定义reducer函数 
        // 作用: 根据不同的action对象，返回不同的新的state
        // state: 管理的数据初始状态
        // action: 对象 type 标记当前想要做什么样的修改
        function reducer(state = {count: 0}, { type, payload }) {
          if(type === 'INCREMENT') {
            return { count: state.count + 1 }
          } else if (type === 'DECREMENT') {
            return { count: state.count - 1 }
          }
        }

        // 2. 使用reducer函数生成store实例
        const store = Redux.createStore(reducer)

        // // 3. 通过store实例的subscribe订阅数据变化
        // 回调函数可以在每次state发生变化的时候自动执行
        store.subscribe(() => {
            console.log('state数据变换');
            // 5. 通过store实例的getState方法获取最新状态更新到视图中
            document.getElementById('count').innerText = store.getState().count
        })

        // 4. 通过store实例的dispatch函数提交action更改状态 
        const decrement = document.getElementById('decrement')
        decrement.addEventListener('click', function() {
            store.dispatch({type: 'DECREMENT'})
        })
        const increment = document.getElementById('increment')
        increment.addEventListener('click', function() {
            store.dispatch({ type: 'INCREMENT'})
        })
    </script>
</body>
</html>